<?php 	$hostname = Configure::read('Sfp.hostname'); ?>

<!-- Load Queue widget CSS and jQuery -->
<?php 
	echo $this->Html->css('jquery.ui.plupload', 'stylesheet');	
	
	// Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes 
	echo $this->Html->script('gears_init', array('inline' => false));
	echo $this->Html->script('browserplus-min', array('inline' => false));
	
	echo $this->Html->script('plupload.full.min', array('inline' => false));
	echo $this->Html->script('jquery.ui.plupload.min', array('inline' => false));	
	
?>



<?php echo $this->Html->css('lightbox.css', 'stylesheet') ?>
<?php echo $javascript->link('prototype.js', false) ?>
<?php echo $javascript->link('scriptaculous.js?load=effects', false) ?>
<?php echo $javascript->link('builder.js', false) ?>
<?php echo $javascript->link('lightbox.js', false) ?>



<!-- Fix the locations of the various lightbox pictures -->
<?php echo "<SCRIPT type='text/javascript'>var closeButton=\"".$hostname."img/close.gif\";</SCRIPT>" ?>
<?php echo "<SCRIPT type='text/javascript'>var loadingImage=\"".$hostname."img/loading.gif\";</SCRIPT>" ?>
<?php echo "<STYLE type='text/css'>#overlay{ background-image: url(\"".$hostname."/img/overlay.png\"); }></STYLE>" ?> 



    

<?php echo $html->link('Return to events page', '/events'); ?>
<?php echo '&nbsp;&nbsp;&nbsp;'; ?>
<?php echo $html->link('Download album', array('controller' => 'events', 'action' => 'download', $event['id'])); ?>
&nbsp;&nbsp;&nbsp;<a href="#uploader_wrapper" onclick="window.scrollTo(0, document.body.scrollHeight); $j('#uploader_wrapper').effect('pulsate',{times:2}); return false;">Add photos</a>
<br />
<div id="sortselection">
<?php   
    echo $this->Form->create('Event', array('url' => array_merge($this->params['named'], array('controller' => 'events', 'action' => 'view'))));
    echo $this->Form->label('Sort Pictures By: ');
    echo $this->Form->select('sort_type', array(
                                'oldest' => 'First Added',
                                'newest' => 'Last Added'), null, array('empty' => false, 'onchange' => 'this.form.submit();'));
    echo $this->Form->end();
    ?>
</div>
<h2><?php echo $event['name']; ?></h2>
<div id="pagination">
<?php
if ($numpages > 1) { ?>
	<div id="first_prev_pag"><?php	
	if ($pageno == 1) {
		echo '&lt;&lt; first';
		echo '&nbsp;';
		echo '&lt; previous';
	} else {
		echo $html->link('<< first', array_merge($this->params['named'], array('controller' => 'events', 'action' => 'view', 'page' => 1)));
		echo '&nbsp;';
		echo $html->link('< previous', array_merge($this->params['named'], array('controller' => 'events', 'action' => 'view', 'page' => $previousPage)));
	} ?>
	</div>

	<div id="choose_page_pag"><?php	
    echo $this->Form->create('Event', array('url' => array_merge($this->params['named'], array('controller' => 'events', 'action' => 'view'))));
    echo 'Page '.$this->Form->select('page_select', $pageList, null, array('empty' => false, 'onchange' => 'this.form.submit();')).' of '.$numpages;
    echo $this->Form->end(); ?>
	</div>

	<div id="next_last_pag">
	<?php
	if ($pageno == $numpages) {
		echo 'next &gt;';
		echo '&nbsp;';
		echo 'last &gt;&gt;';
	} else {
		echo $html->link('next >', array_merge($this->params['named'], array('controller' => 'events', 'action' => 'view', 'page' => $nextPage)));
		echo '&nbsp';
		echo $html->link('last >>', array_merge($this->params['named'], array('controller' => 'events', 'action' => 'view', 'page' => $numpages)));
	}    ?>
	</div><?php
}
?>
</div>


<script type="text/javascript">
	var windowHeight = $j(window).height();
	var windowWidth = $j(window).width();
	var picture_optimum_height = windowHeight < 900 ? (windowHeight-250)/2 : 350;
	var picture_optimum_height = picture_optimum_height < 100 ? 100 : Math.round(picture_optimum_height);
</script>

<script type="text/javascript">

	var theHREF;

	function updateHref(href) {
		theHREF = href;
	}

	var $dialog = $j('<div></div>')
		.html('Are you sure you want to delete this picture?')
		.dialog({
			autoOpen: false,
			title: 'Confirm delete',
			modal: true,
			draggable: false,
			resizable: false,
			show: 'slide',
			hide: 'fadeout',
			buttons: { "Yes": function() { window.location.href = theHREF; $dialog.dialog("close"); },
					   "No": function() { $dialog.dialog("close"); }
					 }
		});
	
</script>


<div class="clear" id="event_view"><?php
	$i = 0;
	foreach ($pictures as $picture): ?>
		<?php $clear = ($i % 2 == 0) ? 'clear' : ''; ?>	
		<?php $float = ($i % 2 == 0) ? 'photoright right' : 'photoleft left'; ?>	
		<div class="event_view_photo_wrapper <?php echo $clear; ?>">			
			<div id="event_view_photo<?php echo $i; ?>" class="event_view_photo <?php //echo $float; //echo $pos; ?>" >
				<div class="photo_box" id="photo_box<?php echo $i ?>">
                <?php if($picture['is_owner'] or $admin_flag) { ?>
					<div id="event_view_photo_delete<?php echo $i; ?>" class="event_view_photo_delete">
						<?php echo $html->link('delete', '/pictures/delete/'.$picture['id'], array('id' => 'delete_confirmation'.$i)); ?>
					</div>
					<?php } ?>				
					<a id="photolink<?php echo $i ?>"
					   rel="lightbox"
					   title="<?php echo $picture['caption'] ?>"
					   href="<?php echo $hostname.'pix/phpThumb/phpThumb.php?src='.$hostname.'pix/'.$event['id'].'/'.$picture['file_name'].'&w=1024&h=800' ?>">
							<img id="photo<?php echo $i ?>" 
								 alt="Photograph: <?php $picture['caption'] ?>"
								 title="<?php echo $picture['caption'] ?>"
								 src="<?php echo $hostname.'pix/phpThumb/phpThumb.php?src='.$hostname.'pix/'.$event['id'].'/'.$picture['file_name'].'&wl=450&hp=350' ?>"/>
					</a>
					<?php	// don't delete yet, we may go back to this
					//echo $html->link($html->image(' ', array('id' => 'photo'.$i)),		
					//			   $hostname.'pix/phpThumb/phpThumb.php?src='.$hostname.'pix/'.$event['id'].'/'.$picture['file_name'].'&w=1024&h=800',		
					//			   array('rel' => 'lightbox', 'escape' => false, 'title' => $picture['caption']));		
					?>
				</div>
				<div id="edit<?php echo $i; ?>" class="captioner">
				<?php
					echo $ajax->form(array('type' => 'post', 'options' => array(
							'model' => 'Picture', 
							'update' => 'cap'.$i, 
							'url' => '/pictures/edit', 
							'complete' => '$j("#edit'.$i.'").hide("fade", 100);
									var newCaption = $j("#captionInput'.$i.'").val();
									$j("#photo'.$i.'").attr({ alt: "Photograph: " + newCaption,
															  title: newCaption });
									$j("#photolink'.$i.'").attr( "title", newCaption );'
					)));	// why is the ajax form being submitted (and returning) twice?
					?><div id="fixChrome<?php echo $i; ?>" class="fixChrome"><?php
					echo $form->input('Picture.caption', array('label' => 'Add or edit caption:', 'value' => $picture['caption'], 'id' => 'captionInput'.$i, 'style' => 'font-size:100%;'));
					?></div><?php
					echo $form->input('Picture.id', array('type' => 'hidden', 'value' => $picture['id']));
					echo $form->end('Update caption');
				?>
				</div>
				<div id="cap<?php echo $i; ?>" class="centertext">
					<p><?php echo $picture['caption'] ? $picture['caption'] : '&nbsp;' ?></p>
				</div>
				<script type="text/javascript">
					var src = "<?php echo $hostname.'pix/phpThumb/phpThumb.php?src='.$hostname.'pix/'.$event['id'].'/'.$picture['file_name'].'&wl=450&hp=350'; ?>";
					$j("#photo<?php echo $i; ?>").hide(); // hide until fully loaded
					$j("#photo<?php echo $i; ?>").attr("src", src.replace("hp=350", "hp=" + picture_optimum_height));
					$j("#photolink<?php echo $i; ?>").attr("href", src.replace("wl=450&hp=350", "w=" + windowWidth * 0.8 + "&h=" + windowHeight * 0.8));
					$j("#photo<?php echo $i; ?>").load(function() { 
						$j("#event_view_photo<?php echo $i; ?>").width($j("#photo<?php echo $i; ?>").width()); 
						$j("#photo<?php echo $i; ?>").show();
					});
					
					$j("#photo_box<?php echo $i; ?>").mouseenter(function() {
						$j("#event_view_photo_delete<?php echo $i; ?>").show();
						$j(".captioner").hide("fade", 100);
					});
					$j("#content, #container").mouseenter(function() {
						$j(".captioner").hide("fade", 100);
					});
					$j("#photo_box<?php echo $i; ?>").mouseleave(function() {
						$j("#event_view_photo_delete<?php echo $i; ?>").hide();
					});

					$j("#delete_confirmation<?php echo $i; ?>").click(function() {
						updateHref($j(this).attr("href"));
						$dialog.dialog('open');
						// prevent the default action, e.g., following a link
						return false;
					});

					$j("#cap<?php echo $i; ?>").mouseenter(function() {
						$j("#edit<?php echo $i; ?>").show("fade", 200);
					});
					$j("#edit<?php echo $i; ?>").mouseleave(function(event) {
						var fixChromeDiv = "fixChrome<?php echo $i; ?>";
						var triggerDiv = $j(event.target).parent().get(0).id;
						if (triggerDiv !== fixChromeDiv) { 
							$j("#edit<?php echo $i; ?>").hide("fade", 100);
						}
					});
				</script>
			</div>
		</div><?php
		$i++;
	endforeach; ?>
</div>


<h3 class="clear">Add your photos to this album</h3>
<div class="clear" id="uploader_wrapper">
<form method="post" action="<?php echo $hostname; ?>pictures/upload_finished/<?php echo $event['id'] . '/' . $pageno ?>" id="PictureAddForm">
	<div id="uploader">
		<p>To upload photos please reload this page in a web browser with JavaScript enabled.</p>
	</div>
</form>
</div>

<script type="text/javascript">
	// Convert divs to queue widgets when the DOM is ready
	$j(function() {
		$j("#uploader").plupload({
			// General settings
			runtimes : 'gears,html5,silverlight,browserplus,flash,html4',
			url : '<?php echo $hostname; ?>pictures/upload/<?php echo $event['id'] . '/' . $pageno ?>',
			max_file_size : '8mb',
			chunk_size : '1mb',
			multiple_queues : true,

			// Resize images on clientside if we can
			resize : {width : 1024, height : 1024, quality : 100},
				
			// Sort files
			sortable: true,

			// Specify what files to browse for
			filters : [
				{title : "Image files", extensions : "jpg,jpeg,jpe,png,gif,bmp"}
			],

			// Flash settings
			flash_swf_url : '<?php echo $hostname; ?>plupload/js/plupload.flash.swf',

			// Silverlight settings
			silverlight_xap_url : '<?php echo $hostname; ?>plupload/js/plupload.silverlight.xap'
		});

		var uploader = $j('#uploader').plupload('getUploader');

		// "UploadComplete" event never fires because of bugs in plupload.js (count isn't updated 
		// inside uploadNext() loop; and count should be compared to files.length - 1);
		// so I worked around it.  TODO: submit bug fixes to plupload project
		uploader.bind('StateChanged', function(upl) {
			if (upl.state == plupload.STOPPED && upl.files.length > 0) {
				// alert('upl.total.uploaded == ' + upl.total.uploaded
		 		//		+ '\nupl.files.length == ' + upl.files.length);
		 		if (upl.total.uploaded == upl.files.length)
		 			$j('form').submit();
			}
		});
		
	/*	uploader.bind('FileUploaded', function(upl, file, info) {
			// Called when a file has finished uploading
			alert('upl.total.uploaded == ' + upl.total.uploaded
		 			+ '\nupl.files.length == ' + upl.files.length);
		});

		uploader.bind('UploadComplete', function(upl, files) {
			alert('Upload Complete! ' + files.length + ' files uploaded.');
		});
	*/
	});
</script>

